<!-- eslint-disable vue/multi-word-component-names -->
<template>
	<div class="back">
		<div class="subject">
			<selectForm :id="id"  @ResBookType="ResBookType" @resdata="resRefdata" />
		</div>
		<div class="table">
      <a-table  :id="id" @selection-change="selection_change"  row-key="id" :row-selection =row_selection  :columns="columns" :data="data"  :pagination="{ pageSize: 18 }" :virtual-list-props="{ height: 960 }">
        <template #columns>
          <a-table-column title="图书名称" data-index="name"></a-table-column>
          <a-table-column title="类型" data-index="type"></a-table-column>
          <a-table-column title="作者" data-index="author"></a-table-column>
          <a-table-column title="编号" data-index="isbn"></a-table-column>
          <a-table-column title="出版社" data-index="press"></a-table-column>
          <a-table-column title="状态" data-index="statusString"></a-table-column>
          <a-table-column title="上架时间" data-index="uploadTime"></a-table-column>
          <a-table-column title="最后借书人" data-index="borrow"></a-table-column>
          <a-table-column title="借书时间" data-index="borrowTime"></a-table-column>
          <a-table-column title="预计还书时间" data-index="returnTime"></a-table-column>
          <a-table-column>
            <template #cell="{ record }">
              <a-button @click="updata({ name: record.name, id: record.id })">view</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
		</div>

		<a-modal :simple="true" :width="600" v-model:visible="visible" title="修改图书信息" @cancel="handleCancel"
			:on-before-ok="handleBeforeOk" unmountOnClose>
			<a-form :model="form" :style="{ width: '600px' }">
				<a-form-item field="name" :rules="[{ required: true, maxLength: 20 }]" label="Username">
					<a-input v-model="form.name" placeholder="please enter your username..." />
				</a-form-item>
				<a-form-item field="size" label="类型">
					<a-radio-group v-model="form.typeid" type="button">
						<a-radio v-for="(item,index) in type" :key="index" :value="item.id">{{item.type}}</a-radio>
					</a-radio-group>
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
</template>
<script setup>
import selectForm from './components/selectForm.vue';
import {
	ref,
	reactive
} from 'vue';
const form = reactive({
  name:'',
	typeid: '',
});

const row_selection ={
  type:"checkbox",
  showCheckedAll:true,
  onlyCurrent:false,
}

const data = ref([]);
const type =ref();
// 选中的id数组
let id = ref();
const selection_change = (val) => {
  id.value = val;
}
// 接收子组件的值
const ResBookType = (value) => {
  type.value = value;
}
const resRefdata = (value) => {
	data.value = value.value
}
const visible = ref(false);

const handleCancel = () => {
	visible.value = false;
	console.log("关闭")
}
const handleBeforeOk = async () => {
  console.log(form.typeid)
	await new Promise(resolve => setTimeout(resolve, 3000));
	return true;
	// prevent close
	// return false;
};
const columns = [
{
	title: '图书名称',
	dataIndex: 'name',
},
{
	title: '类型',
	dataIndex: 'type',
},
{
	title: '作者',
	dataIndex: 'author',
},
{
	title: '编号',
	dataIndex: 'isbn',
},
{
	title: '出版社',
	dataIndex: 'press',
}, {
	title: '状态',
	dataIndex: 'statusString',
},
{
	title: '上架时间',
	dataIndex: 'uploadTime',
},
{
	title: '最后借书人',
	dataIndex: 'borrow',
},
{
	title: '借书时间',
	dataIndex: 'borrowTime',
},
{
	title: '预计还书时间',
	dataIndex: 'returnTime',
}
];

const updata = (book) => {
	visible.value = true
	console.log(book)
}
</script>
<style lang="scss" scoped>
.back {
	width: 100%;
	height: 100%;
	background-color: #f2f3f5;

	.subject {
		width: 98%;
		height: 100px;
		margin: auto;
		background-color: #fff;
		margin-top: 40px;
	}

	.table {
		width: 98%;
		height: 80%;
		margin: auto;
	}
}
</style>
